<template>
	<view class="xm-keyboard">
		<view class="xm-content" v-if="show">
			<view class="xm-mask" v-if="mask" @tap="close"></view>
			<view class="xm-box" :class="anim?'xm-animation':''">
				<view class="xm-toolbar">
					<view class="xm-toolbar-left">
						<view class="keyboard-input" @tap.stop="changeCur()">
							<text v-for="(item, index) in input" :key="index" :class="cur === index ? 'cur abs':''" @tap.stop="changeCur(index)">{{ item }}</text>
							<text v-if="input.length === 0" class="cur"></text>
						</view>
						<view v-if="input.length" class="xm-tips">({{ input.length }}位)</view>
					</view>
					<view class="xm-toolbar-right">
						<view v-show="exchange" class="xm-toolbar-item" v-for="(item, index) in typeList" :key="index" @tap="changeType(item, index)">
							{{ item.name }}
						</view>
						<image class="xm-icon" @tap="close" style="margin-left: 20upx;" src="" mode="widthFix"></image>
					</view>
				</view>
				<view class="xm-main" :class="['xm-mode-' + typeInfo.mode, ]" :style="{ paddingBottom: safeBottom + 'px' }">
					<view class="xm-main-left">
						<view class="xm-line" v-for="(lines, lineIndex) in list" :key="lineIndex">
							<view class="xm-btn" v-for="(item, index) in lines" :key="index" :class="disable.indexOf(item)!==-1?'disable':''" @tap="keyPress(item)"
								:style="{ 
									height: keyWidth * proportion + 'px',
									maxWidth: keyWidth + 'px',
									width: keyWidth + 'px',
									marginRight: minWidth + 'px'
								}">
								{{ item }}
								
								<view class="high-item" v-if="highItem == item">{{ item }}</view>
							</view>
						</view>
					</view>
					<view class="xm-main-right" :style="{ bottom: safeBottom + 'px' }">
						<view class="xm-line">
							<view class="xm-btn2" v-for="(bar,index) in bars" :key="index" @tap="toHandler(bar)"
								:style="{
									backgroundColor: bar.bgColor,
									color: bar.color,
									maxWidth: keyWidth * (typeInfo.mode == 1 ? 1.5:1) + 'px',
									width: keyWidth * (typeInfo.mode == 1 ? 1.5:1) + 'px',
									height: (typeInfo.mode == 1 ? (keyWidth * proportion + 'px') : '100%'),
									maxHeight: typeInfo.mode == 1 ? '':'unset',
									marginTop: typeInfo.mode == 1 ? '':((index != 0 ? 0 : 20) + 'upx')
								}"
							>
								<text v-if="bar.text">{{ bar.text }}</text>
								<image v-if="bar.img" :src="bar.img" mode="widthFix" class="xm-icon2"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * show: 是否展示键盘
	 * mask: 是否展示遮罩
	 * anim: 是否开启弹出动画
	 * defaultValue: 键盘默认数据
	 * exchange: 是否展示切换工具栏
	 * mode: 键盘类型(0:车牌, 1:数字+字母, 2:数字, 3:字母)
	 * maxLength: 输入最大长度
	 * 
	 * @close: 键盘收起
	 * @change: 值变化
	 */
	export default {
		name: "xm-keyboard",
		props: {
			show: {
				required: true,
			},
			mask: {
				required: false,
				default: true
			},
			anim: {
				required: false,
				default: true
			},
			defaultValue: {
				required: false,
				default: () => '',
			},
			exchange: {
				required: false,
				default: true
			},
			mode: {
				required: false,
				default: 1,
			},
			maxLength: {
				required: false,
				default: -1,
			},
			disable: {
				required: false,
				default: () => ('IO')
			},
			maxAutoClose: {
				required: false,
				default: false,
			},
			safeSize: {
				required: false,
				default: 10,
			}
		},
		model: {
			prop: 'show',
			event: 'close'
		},
		watch: {
			show(n, o) {
				this.toShow(n, o);
			},
			mode(n, o){
				this.type = n;
			}
		},
		data() {
			
			const delPng = ''
			
			return {
				input: [],
				cur: 0,
				// 设备的宽度
				width: 0,
				// 设备的高度
				height: 0,
				// 按钮与空白的比例
				ratio: 7,
				// 当前键盘类型
				type: 0,
				typeList: [
					{ name: '地区', max: 10, list: [
						"京沪浙苏粤鲁晋冀豫川".split(''),
						"渝辽吉黑皖鄂津贵云桂".split(''),
						"琼青新藏蒙宁甘陕闽赣".split(''),
						"湘使领警学港澳".split(''),
					], mode: 1 },
					{ name: '英文', max: 10, list: [
						'1234567890'.split(''),
						'QWERTYUIOP'.split(''),
						'ASDFGHJKL'.split(''),
						'ZXCVBNM'.split(''),
					], mode: 1 },
					// { name: '数字', max: 3, list: [
					// 	"123",
					// 	"456",
					// 	"789",
					// 	".0x",
					// ], mode: 2 },
					// { name: '字母', max: 10, list: [
					// 	'QWERTYUIOP',
					// 	'ASDFGHJKL',
					// 	'ZXCVBNM',
					// ], mode: 1 },
				],
				bars: [
					{ fun: 'close', text: '完成', bgColor: '#f37b1d', color: '#ffffff' },
					{ fun: 'del', img: delPng },
				],
				// 安全底部距离
				safeBottom: 0,
				// 正在点击的键盘
				highItem: '',
			};
		},
		computed: {
			//按钮 高:宽 占比
			proportion(){
				return 4 / 3;
			},
			minWidth(){
				return this.width / ((this.max + this.typeInfo.mode - 1) * this.ratio + this.max + 1);
			},
			keyWidth() {
				return this.minWidth * this.ratio; 
			},
			typeInfo(){
				return this.typeList[this.type];
			},
			list(){
				return this.typeInfo.list;
			},
			max(){
				return this.typeInfo.max;
			}
		},
		methods: {
			toShow(n, o){
				if(n){
					this.input = this.defaultValue.split('')
					this.cur = this.input.length - 1;
					this.type = this.mode;
				}
			},
			close() {
				this.$emit('close', false)
				this.input.length = 0;
			},
			del(){
				this.downEvent()
				let v = this.input.splice(this.cur, 1);
				this.emitChange(v, false);
			},
			keyPress(v){
				if(this.maxLength > 0 && this.input.length >= this.maxLength){
					return ;
				}
				if(this.disable.indexOf(v) !== -1){
					return ;
				}
				
				this.downEvent(v)
				this.input.splice(this.cur + 1, 0, v);
				this.emitChange(v);
				
				if(this.maxLength > 0 && this.input.length >= this.maxLength){
					if(this.maxAutoClose != void 0 && this.maxAutoClose != false){
						this.close();
					}
				}
			},
			changeCur(index){
				this.cur = index || this.input.length - 1;
			},
			emitChange(v = '', add = true){
				if(add){
					this.cur ++;
				}else{
					this.cur --;
					if(this.cur < 0){
						this.cur = 0;
					}
				}
				this.$emit('change', { text: this.input.join(''), v, add })
			},
			changeType(item, index){
				this.type = index;
			},
			toHandler(bar){
				bar.fun && this[bar.fun] && this[bar.fun]();
			},
			downEvent(item = ''){
				uni.vibrateShort && uni.vibrateShort({});
				
				if(item){
					this.highItem = item;
					
					clearTimeout(this.highCid)
					this.highCid = setTimeout(() => {
						this.highItem = '';
					}, 200)
				}else{
					this.highItem = '';
				}
			}
		},
		mounted() {
			const { windowWidth, windowHeight, safeAreaInsets } = uni.getSystemInfoSync();
			this.width = windowWidth;
			this.height = windowHeight;
			this.safeBottom = safeAreaInsets.bottom || this.safeSize
			
			this.toShow(this.show);
			
		},

	}
</script>

<style lang="scss" scoped>
	.xm-keyboard {

		$xm-border-color: #D4D4D4;
		$xm-shadow-color: rgba(0, 0, 0, 0.1);
		$xm-mask-bg-color: rgba(0, 0, 0, 0.4);
		$xm-box-bg-color: #FFFFFF;
		font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
		
		@keyframes xm-up {
		    0% { opacity: 0; transform: translateY(100%) }
		    100% { opacity: 1; transform: translateY(0) }
		}

		.xm-fixed-b {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.xm-flex {
			display: flex;
			align-items: center;
		}

		.xm-icon {
			width: 32upx;
			height: 32upx;
		}
		
		.xm-icon2 {
			width: 48upx;
			height: 48upx;
		}
		
		.xm-animation{
			animation-duration: .2s;
			animation-timing-function: ease-out;
			animation-fill-mode: both;
			animation-name: xm-up;
		}

		.xm-content {
			
		}

		.xm-mask {
			@extend .xm-fixed-b;
			z-index: 992;
			top: 0;
			background-color: $xm-mask-bg-color;
		}

		.xm-box {
			@extend .xm-fixed-b;
			z-index: 993;
			min-height: 100px;
			width: 100%;
			background-color: $xm-box-bg-color;
			box-shadow: 0 0 10upx $xm-shadow-color;
			border-top: 2upx solid $xm-border-color;
			flex-direction: column;
		}

		.xm-toolbar {
			@extend .xm-flex;
			justify-content: space-between;
			padding: 10upx 20upx;
			border-bottom: 2upx solid #E0E1E2;

			&-left {
				@extend .xm-flex;
			}

			&-right {
				position: relative;
				@extend .xm-flex;

				&::before {
					content: '|';
					position: absolute;
					top: -4upx;
					bottom: 0;
					left: -30upx;
					color: #DEDEDE;
				}
			}
			
			&-item{
				margin-left: 20upx;
				font-size: 24upx;
				color: #999;
				border: 2upx solid $xm-border-color;
				padding: 4upx 8upx;
				border-radius: 4upx;
				
				&:first-child{
					margin-left: 0;
				}
			}
		}

		.xm-main {
			background-color: #D4D5DA;
			padding: 20upx 10upx;

			.xm-line {
				@extend .xm-flex;
				justify-content: center;
				padding-top: 20upx;
				&:first-child{
					padding-top: 0;
				}
			}
			
			.xm-common-btn{
				@extend .xm-flex;
				justify-content: center;
				box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1);
				border-radius: 6upx;
				max-height: 120upx;
			}

			.xm-btn {
				@extend .xm-common-btn;
				background-color: #FCFFFF;
				position: relative;

				&:last-child {
					margin-right: 0 !important;
				}
				// &:active:not(.disable){
				// 	transform: scale(1.8, 1.8);
				// }
				&.disable{
					background-color: #BDBEC3;
				}
			}
			
			.high-item{
				position: absolute;
				width: 140%;
				height: 140%;
				top: calc(-140% - 10px);
				@extend .xm-common-btn;
				background-color: #FCFFFF;
				font-size: 18px;
				font-weight: bold;
				
				&::after{
					content: ' ';
					width: 0;
					height: 0;
					border-left: 10px solid transparent;
					border-right: 10px solid transparent;
					border-top: 10px solid #FCFFFF;
					position: absolute;
					bottom: -10px;
				}
			}
			
			.xm-btn2{
				@extend .xm-common-btn;
				background-color: #BDBEC3;
				&:active{
					transform: scale(1.2, 1.2);
				}
			}
		}
		
		.xm-mode-1{
			.xm-main-left{
				.xm-btn{
					z-index: 2;
				}
			}
			.xm-main-right{
				@extend .xm-fixed-b;
				left: 10upx;
				right: 10upx;
				bottom: 20upx;
				z-index: 1;
				
				.xm-line{
					justify-content: space-between;
				}
			}
		}
		
		.xm-mode-2{
			display: flex;
			justify-content: space-between;
			
			.xm-main-right{
				.xm-line{
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex-flow: column-reverse;
				}
			}
		}
		
		
		.keyboard-input{
			display: inline-block;
			min-width: 200upx;
			border-bottom: 1px solid #CCC;
			padding: 0 6px;
			
			@keyframes blink{
				0%{ opacity: 0; }
				50%{ opacity: 1; }
				100%{ opacity: 0; }
			}
			.cur:after{
				&.abs{
					position: absolute;
				}
				color: #39B54A;
				content: '|';
				animation: blink 1s infinite;
			}
		}
		.xm-tips{
			display: inline-block; 
			margin-left: 20upx;
			color: #8799a3;
			font-size: 20upx;
		}

	}
</style>
